import React, { Component } from 'react';
// 将表单中的value 的值由state 中的数据去实现控制. 这种表单叫做 受控组件
// 受控组件的特点: 实现了双向数据的绑定
// 语法: value + onChange 实现
class Mycls extends Component {
    state = {
        username: "尉迟恭",
        Sex: '男',
        checkedArr: ['money', 'cool'],
        seled: '美人'
    }
    render() {
        const { username, Sex, checkedArr, seled } = this.state
        return (
            <div>
                {/* 输入框 */}
                <p>
                    <input type='text' name='username' value={username} onChange={this.editFn.bind(this, 'username')} />
                </p>
                {/* 单选 */}
                <p>
                    <input type='radio' name='Sex' value='男' checked={Sex == '男'} onChange={this.editFn.bind(this, 'Sex')} /> 男
                    <input type='radio' name='Sex' value='女' checked={Sex == '女'} onChange={this.editFn.bind(this, 'Sex')} /> 女
                </p>
                {/* 复选 */}
                <p>
                    <input type='checkbox' value='money' checked={checkedArr.includes('money')} onChange={this.editFn.bind(this, 'checkedArr')} />money
                    <input type='checkbox' value='car' checked={checkedArr.includes('car')} onChange={this.editFn.bind(this, 'checkedArr')} />car
                    <input type='checkbox' value='cool' checked={checkedArr.includes('cool')} onChange={this.editFn.bind(this, 'checkedArr')} />cool
                </p>
                {/* 下拉框 */}
                <p>
                    <select value={seled} onChange={this.editFn.bind(this, 'seled')}>
                        <option value='江山' >江山</option>
                        <option value="美人" >美人</option>
                        <option value="兄弟" >兄弟</option>
                    </select>


                </p>

            </div>
        );
    };
    editFn = (key, e) => {
        // console.log('编辑');
        // 使用setState 来更新当前的state 状态
        // 思路: 将key 设置成变量 
        // 方式1: 通过传参的形式确定要修改的属性
        // 方式2: 通过事件对象获取当前标签的属性name 来获取要修改的数据
        // console.log(e.target.name);
        // 对象方式修改state
        // this.setState({
        //     [key]: e.target.value
        // })

        // 函数方式修改state
        this.setState((state) => {
            if (key == 'checkedArr') {
                // 复选框的操作
                // console.log(e.target.value);
                if (state.checkedArr.includes(e.target.value)) {
                    // 有当前的属性
                    state[key] = state.checkedArr.filter((item) => {
                        return item != e.target.value
                    })
                } else {
                    // 没有该属性
                    state.checkedArr.push(e.target.value)
                }
            } else {
                state[key] = e.target.value
            }

            return state
        })
    };

}

export default Mycls;
